<template>
  <div class="navbar">
    <el-menu class="navbar-el-menu" background-color="#7cabb1" 
      text-color="#baccd9" active-text-color="#fff" mode="horizontal" unique-opened router> 
      <template v-for="item in state.items" :key="item.index">
        <el-sub-menu v-if="item.subs" :index="item.index">
          <template #title>
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            {{ item.title }}
          </template>

          <template v-for="subItem in item.subs" :key="subItem.index">
            <el-menu-item :index="subItem.index">
              <el-icon>
                <component :is="subItem.icon" />
              </el-icon>
              {{ subItem.title }}
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
  import { ElIcon } from 'element-plus'
  import { ElMenu, ElSubMenu, ElMenuItem } from 'element-plus'
  
  const state = {
    items: [
      {
        index: "1",
        title: "首页",
        icon: "house",  
        subs: [
          { index: "bell", title: "公告信息", icon: "bell" }, 
          { index: "message", title: "留言板", icon: "message" }
        ],
      },
      {
        index: "2",
        title: "宠物领养",
        icon: "sunny",  
        subs: [
          { index: "pet", title: "待领养列表", icon: "view" },  
          { index: "adopt", title: "发布领养", icon: "share" }
        ],
      },
      {
        index: "3",
        title: "宠物社区",
        icon: "chat-dot-round",  
        subs: [
          { index: "forumpost", title: "宠物论坛", icon: "message" },  
          { index: "postform", title: "发布帖子", icon: "edit" }
        ],
      },
      {
        index: "4",
        title: "宠物活动",
        icon: "calendar",  
        subs: [
          { index: "petrescue", title: "日常活动", icon: "help" },  
          { index: "losepet", title: "宠物丢失", icon: "location" }
        ],
      },
    ],
  };
</script>

<style scoped>
  .navbar {
    display: flex;
    justify-content: center;  
    align-items: center;     
    background: pink;
    width: 100%;
    height: 60px;             
  }

  .navbar-el-menu {
    display: flex;
    justify-content: center;  
    align-items: center;      
    width: 100%;
  }

  .navbar-el-menu .el-sub-menu {
    position: relative;
  }

  .navbar-el-menu .el-menu-item {
    height: 100%;               
    line-height: 60px;           
    display: flex;
    align-items: center;        
    justify-content: center;    
  }

  .navbar-el-menu .el-sub-menu .el-menu-item {
    line-height: 60px;           
  }
</style>